<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程序渲染</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a">

  <fieldset>
    <legend>注册</legend>
    <a href="#" @click="flag='email'">邮箱注册</a>
    <a href="#" @click="flag='phone'">手机注册</a>
    <a href="#" @click="flag='chat'">微信注册</a>
    <div v-if="flag=='email'" key="1">
      邮箱地址:<input>
    </div>
    <div v-else-if="flag=='phone'">
      手机号码:<input>
    </div>
    <div v-else>
      微信号码:<input>
    </div>
  </fieldset>
  <fieldset>
    <legend>show:成绩</legend>
    分数：<input type="number" v-model="score">
    <span v-show="score <60 ">不及格</span>
    <span v-show="score >=60&&score<80 ">及格</span>
    <span v-show="score >=80&&score<90 ">良好</span>
    <span v-show="score >=90">优秀</span>
  </fieldset>
  <fieldset>
    <legend>for</legend>
    <span v-for="like,i in likeItems">
      <input type="radio" value="like" name="radio">{{i}}.{{like}}
    </span>
  </fieldset>

</div>
<script>
  var v = new Vue({
    el:"#a",
    data:{
      flag:"email",
      score:0,
      likeItems:['唱','跳','rap','篮球'],
    },
  });
</script>
</body>
</html>